<template>
  <div class="home">
    <el-row class="ub main-center">
      <div class="banner-container">
        <el-carousel type="card" height="420px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.pic" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-row>
    <!--  推荐   -->
    <el-card header="">
      <m-shelf title="推荐">
        <template v-slot:content>
          <el-row :gutter="30">
            <div v-for="(item,index) in recommendProducts" :key="item.id" style="margin-left: 40px">
              <el-col>
                <section class="mt20">
                  <div class="hot">
                    <m-goods :item="item"></m-goods>
                  </div>
                </section>
              </el-col>
            </div>
          </el-row>
        </template>
      </m-shelf>
    </el-card>
    <!-- 新品-->
    <el-card header="">
      <m-shelf title="推荐">
        <template v-slot:content>
          <el-row :gutter="30">
            <div v-for="(item,index) in newProducts" :key="item.id" style="margin-left: 40px">
              <el-col>
                <section class="mt20">
                  <div class="hot">
                    <m-goods :item="item"></m-goods>
                  </div>
                </section>
              </el-col>
            </div>
          </el-row>
        </template>
      </m-shelf>
    </el-card>
  </div>
</template>

<script>
import bannerApi from '../../api/banner'
import productApi from '../../api/product'
import { useRouter } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'
import { useStore } from 'vuex'
import MShelf from '../../components/MShelf.vue'
import MGoods from '../../components/MGoods.vue'

export default {
  name: 'index',
  components: {
    MShelf,
    MGoods
  },
  setup () {
    const store = useStore()
    console.log(store.getters.cartList)
    const state = reactive({
      // 轮播图列表
      bannerList: [],
      // 推荐商品
      recommendProducts: [],
      // 新品
      newProducts: []
    })
    //--------------------_方法 start
    // 获取轮播图
    const getBannerList = async () => {
      bannerApi.list().then(res => {
        state.bannerList = res.data
        // console.log(res.data)
      })
    }
    // 获取推荐商品
    const getRecommendProducts = async () => {
      productApi.gerRecommendProducts().then(res => {
        // console.log(res.data)
        state.recommendProducts = res.data
      })
    }
    // 获取新品
    const getNewProducts = async () => {
      productApi.getNewProducts().then(res => {
        // console.log(res.data)
        state.newProducts = res.data
      })
    }


    //--------------------_方法 end

    // 在这里调用函数
    onMounted(() => {
      getBannerList()
      getNewProducts()
      getRecommendProducts()
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>

<style scoped lang="scss">
.banner-container {
  width: 1200px;
  height: 500px;
}

.mt30 {
  margin-top: 30px;
}

.hot {
  display: flex;

  > div {
    flex: 1;
    width: 25%;
  }
}

</style>
